<template>
	<view>
		<!-- ======= 开通会员弹窗 start ====== -->
		
		<u-popup v-model="show"  mode="center"  width="80%"   border-radius="20">
			<view class="vipPopup">
				<view class="vipPopup_header flex_spaceBetween">
					<text>{{title}}</text>
					<button class="vipPopup_close public_button" @click="closePopupBtn">
						<image :src="vipPopupCloseIcon" class="vipPopup_closeIcon"></image>
					</button>
					
				</view>
				<view class="vipPopup_content flex_column">
					<image :src="popupTipsImg" mode="widthFix"></image>
					<text>{{tips}}</text>
				</view>
				<view class="vipPopup_Btns flex_spaceBetween">
					<button class="pubBtnWidth45_2 flex_center pubBtnWidth45_color666 public_button"  @click="closePopupBtn">{{btnTextLeft}}</button>
					<button class="pubBtnWidth45_2 pubBtnWidth45_colorFFF flex_center public_button" @click="openVip">{{btnTextRight}}</button>
				</view>
			</view>
		</u-popup>
		
		<!-- ======= 开通会员弹窗 end ====== -->
	</view>
</template>

<script>
	export default {
		name:"vipPopup",
		props:{
			show:{//是否显示
				type:Boolean,
				default:false,
			},
			title:{
				type:String,
				default:"开通会员",
			},
			tipsImg:{
				type:String,
				default:"vipPopupImg"
			},
			
			tips:{//提示文字
				type:String,
				default:"开通会员，解锁达人照片",
			},
			btnTextLeft:{//左边按钮文字
				type:String,
				default:"考虑一下",
			},
			btnTextRight:{//右边按钮文字
				type:String,
				default:"开通VIP",
			}
		},
		watch:{
			show: {
			// 每个属性值发生变化就会调用这个函数
			handler(newVal, oldVal) {
				this.popupTipsImg = this[this.tipsImg]
			},
			// 立即处理 进入页面就触发
			immediate: true,
			// 深度监听 属性的变化
			deep: true
		},
		},
		data() {
			return {
				popupTipsImg:"",//弹窗提示图片
				vipPopupCloseIcon: this.$staticImgurl +"vipPopup_close.png",//关闭弹窗icon
				loginPopup:this.$staticImgurl +"loginPopup.png",//关闭弹窗icon 
				
				
				
			};
		},
		methods:{
			//关闭弹窗
			closePopupBtn(){
				this.$emit("closePopup")
			},
			//点击开通vip
			openVip(){
				this.$emit("openVip")
			}
		}
	}
</script>

<style scoped>
	
	/* ======= 开通会员弹窗 start ======*/
	.vipPopup {
		overflow: hidden;
	}
	.vipPopup_header {
		font-size: 16px;
		color: #000000;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #F3F3F5;
	}
	.vipPopup_Btns,
	.vipPopup_header,
	.vipPopup_content {
		box-sizing: border-box;
		width: 100%;
		padding:15px 4%;
	}
	.vipPopup_header image {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		cursor: pointer;
	}
	
	.vipPopup_close {
		position: absolute;
		top:10px;
		right: 10px;
		background-color: transparent;
	}
	.vipPopup_closeIcon {
		width: 26px;
		height: 26px;
		border-radius: 50%;
	}
	
	
	.vipPopup_content image{
		width: 50px;
		height: auto;
	}
	.vipPopup_content text {
		font-size: 14px;
		color: #666666;
		margin-top: 20px;
	}
	
	/* ======= 开通会员弹窗 end ======*/
</style>